<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>我的世界MOD百科-管理员模版</title>
    <script src="../js/jquery-3.7.1.js"></script>
    <link href="../css/font-awesome.css" rel="stylesheet">
    <link href="../css/admin.css" rel="stylesheet">
    <link href="../css/management.css" rel="stylesheet">
    <style>
        .about-container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            z-index: 20;
            display: grid;
            grid-template-columns: 1fr;
            gap: 3rem;
        }

        @media (min-width: 1024px) {
            .about-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        .nav-container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0.5rem 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .nav-logo {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .nav-logo i {
            color: #E67E22;
            font-size: 1.5rem;
        }

        .nav-logo h1 {
            font-size: 1.25rem;
            font-weight: bold;
            letter-spacing: 1px;
            margin: 0;
        }

        .nav-logo h1 span {
            color: #E67E22;
        }

        .nav-desktop {
            display: none;
        }

        @media (min-width: 768px) {
            .nav-desktop {
                display: flex;
                align-items: center;
                gap: 2rem;
            }
        }

        .nav-desktop a {
            color: white;
            text-decoration: none;
            font-weight: bold;
            position: relative;
            transition: color 0.2s;
        }

        .nav-desktop a:hover {
            color: #E67E22;
        }

        .nav-desktop a::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: #E67E22;
            transition: width 0.3s;
        }

        .nav-desktop a:hover::after {
            width: 100%;
        }

        .nav-mobile-btn {
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
        }

        @media (min-width: 768px) {
            .nav-mobile-btn {
                display: none;
            }
        }

        /* 用户头像 */
        .user{
            display: flex;
            align-items: center;
            height: 40px;
        }

        .user>* {
            margin-left: 0.2em;
        }

        .user>.profilePicture{
            background-color: white;
            height: 40px;
            width: 40px;
        }
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            /* background: url('https://picsum.photos/id/137/1920/1080') fixed no-repeat;*/
            background-size: cover;
            margin: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* 导航栏样式 */
        nav {
            background-color: rgba(30, 41, 59, 0.9);
            color: white;
            box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
            position: sticky;
            top: 0;
            z-index: 50;
            backdrop-filter: blur(10px);
        }

        .nav-container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 1rem 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .nav-logo {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .nav-logo i {
            color: #E67E22;
            font-size: 1.5rem;
        }

        .nav-logo h1 {
            font-size: 1.25rem;
            font-weight: bold;
            letter-spacing: 1px;
            margin: 0;
        }

        .nav-logo h1 span {
            color: #E67E22;
        }

        .nav-desktop {
            display: none;
        }

        @media (min-width: 768px) {
            .nav-desktop {
                display: flex;
                align-items: center;
                gap: 2rem;
            }
        }

        .nav-desktop a {
            color: white;
            text-decoration: none;
            font-weight: bold;
            position: relative;
            transition: color 0.2s;
        }

        .nav-desktop a:hover {
            color: #E67E22;
        }

        .nav-desktop a::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: #E67E22;
            transition: width 0.3s;
        }

        .nav-desktop a:hover::after {
            width: 100%;
        }

        .nav-mobile-btn {
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
        }

        @media (min-width: 768px) {
            .nav-mobile-btn {
                display: none;
            }
        }

        .nav-mobile-menu {
            display: none;
            padding: 1rem 0;
        }

        .nav-mobile-menu a {
            display: block;
            padding: 0.5rem 0;
            color: white;
            text-decoration: none;
            font-weight: bold;
        }

        /* 英雄区域样式 */
        .hero {
            height: 80vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(30, 41, 59, 0.5);
            backdrop-filter: blur(10px);
            z-index: 10;
        }

        .hero::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, transparent, rgba(30, 41, 59, 1));
            z-index: 10;
        }

        .hero-container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
            z-index: 20;
        }

        .hero h1 {
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: bold;
            color: white;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            line-height: 1.2;
            margin-bottom: 1.5rem;
        }

        .hero h1 span {
            color: #E67E22;
        }

        .hero p {
            font-size: clamp(1rem, 2vw, 1.25rem);
            color: rgba(248, 250, 252, 0.9);
            max-width: 800px;
            margin: 0 auto 2rem;
        }

        .hero-buttons {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            align-items: center;
        }

        @media (min-width: 640px) {
            .hero-buttons {
                flex-direction: row;
                justify-content: center;
            }
        }

        .hero-buttons a {
            background-color: #E67E22;
            color: white;
            font-weight: bold;
            padding: 0.75rem 1.5rem;
            text-decoration: none;
            box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
            transition: all 0.15s;
        }

        .hero-buttons a:hover {
            background-color: rgba(230, 126, 34, 0.8);
            transform: translateY(-2px);
            box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25);
        }

        /* 精选MOD区域样式 */
        .featured {
            background-color: rgba(30, 41, 59, 1);
            padding: 5rem 0;
            position: relative;
        }

        .featured::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5rem;
            background: linear-gradient(to bottom, rgba(30, 41, 59, 0), rgba(30, 41, 59, 1));
            z-index: 10;
        }

        .featured-container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            z-index: 20;
        }

        .featured-header {
            text-align: center;
            margin-bottom: 4rem;
        }

        .featured-header h2 {
            font-size: clamp(1.5rem, 3vw, 2.5rem);
            font-weight: bold;
            color: white;
            margin-bottom: 1rem;
        }

        .featured-header h2 span {
            color: #E67E22;
        }

        .featured-header p {
            color: rgba(248, 250, 252, 0.7);
            max-width: 500px;
            margin: 0 auto;
        }

        .featured-cards {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
        }

        @media (min-width: 768px) {
            .featured-cards {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (min-width: 1024px) {
            .featured-cards {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        .featured-card {
            background-color: rgba(30, 41, 59, 0.8);
            color: white;
            border: 2px solid rgba(85, 122, 70, 0.3);
            box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
            overflow: hidden;
            transition: all 0.3s;
        }

        .featured-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25);
        }

        .featured-card-img {
            position: relative;
            height: 12rem;
            overflow: hidden;
        }

        .featured-card-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }

        .featured-card-img img:hover {
            transform: scale(1.1);
        }

        .featured-card-label {
            position: absolute;
            top: 0.75rem;
            right: 0.75rem;
            background-color: #E67E22;
            color: white;
            font-size: 0.75rem;
            font-weight: bold;
            padding: 0.25rem 0.5rem;
            border-radius: 2px;
        }

        .featured-card-content {
            padding: 1.5rem;
        }

        .featured-card-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.75rem;
        }

        .featured-card-title h3 {
            font-size: 1.25rem;
            font-weight: bold;
            margin: 0;
        }

        .featured-card-likeCount {
            display: flex;
            align-items: center;
            color: rgba(248, 250, 252, 0.8);
            font-size: 0.875rem;
        }

        .featured-card-likeCount i {
            color: #E67E22;
            margin-right: 0.25rem;
        }

        .featured-card-desc {
            color: rgba(248, 250, 252, 0.7);
            font-size: 0.875rem;
            margin-bottom: 1rem;
        }

        .featured-card-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-bottom: 1.25rem;
        }

        .featured-card-tag {
            background-color: rgba(85, 122, 70, 0.3);
            color: rgba(248, 250, 252, 0.9);
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
            border-radius: 2px;
        }

        .featured-card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .featured-card-author {
            display: flex;
            align-items: center;
            color: rgba(248, 250, 252, 0.8);
            font-size: 0.875rem;
        }

        .featured-card-author img {
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            margin-right: 0.5rem;
        }

        .featured-card-btn {
            background-color: #557A46;
            color: white;
            font-weight: bold;
            padding: 0.5rem 0.75rem;
            text-decoration: none;
            box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
            transition: all 0.15s;
        }

        .featured-card-btn:hover {
            background-color: rgba(85, 122, 70, 0.8);
            transform: translateY(-2px);
            box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25);
        }

        .featured-more {
            text-align: center;
            margin-top: 3rem;
        }

        .featured-more a {
            background-color: #557A46;
            color: white;
            font-weight: bold;
            padding: 0.75rem 1.5rem;
            text-decoration: none;
            box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
            transition: all 0.15s;
            display: inline-flex;
            align-items: center;
        }

        .featured-more a i {
            margin-left: 0.5rem;
        }

        .featured-more a:hover {
            background-color: rgba(85, 122, 70, 0.8);
            transform: translateY(-2px);
            box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25);
        }

        /* MOD分类区域样式 */
        .categories {
            background-color: rgba(30, 41, 59, 0.8);
            backdrop-filter: blur(10px);
            padding: 5rem 0;
        }

        .categories-container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
        }

        .categories-header {
            text-align: center;
            margin-bottom: 4rem;
        }

        .categories-header h2 {
            font-size: clamp(1.5rem, 3vw, 2.5rem);
            font-weight: bold;
            color: white;
            margin-bottom: 1rem;
        }

        .categories-header h2 span {
            color: #E67E22;
        }

        .categories-header p {
            color: rgba(248, 250, 252, 0.7);
            max-width: 500px;
            margin: 0 auto;
        }

        .categories-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
        }

        @media (min-width: 768px) {
            .categories-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (min-width: 1024px) {
            .categories-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        .categories-item {
            position: relative;
            height: 10rem;
            border-radius: 0;
            overflow: hidden;
            box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
            transition: all 0.3s;
        }

        .categories-item:hover {
            transform: translateY(-4px);
            box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25);
        }

        .categories-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, rgba(30, 41, 59, 0.9), transparent);
            z-index: 10;
        }

        .categories-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }

        .categories-item img:hover {
            transform: scale(1.1);
        }

        .categories-item-content {
            position: absolute;
            bottom: 0;
            left: 0;
            padding: 1rem;
            z-index: 20;
        }

        .categories-item-content h3 {
            font-size: 1.25rem;
            font-weight: bold;
            color: white;
            margin-bottom: 0.25rem;
            transition: color 0.3s;
        }

        .categories-item-content h3:hover {
            color: #E67E22;
        }

        .categories-item-content p {
            color: rgba(248, 250, 252, 0.7);
            font-size: 0.875rem;
            margin: 0;
        }

        /* MOD搜索和筛选区域样式 */
        .search {
            background-color: rgba(30, 41, 59, 1);

        }
        .search h1{
            color: white;
            text-align: center;
            margin-bottom: 2rem;
        }

        .search h1 .text-accent {
            color: #E67E22;
        }
        .search h1 .text-Warning {
            color: #ff0505;
        }
        .search h1 .text-critical {
            color: #06337e;
        }

        .search-container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            background-color: rgba(30, 41, 59, 0.6);
            backdrop-filter: blur(10px);
            padding: 2rem;
            border: 2px solid rgba(85, 122, 70, 0.3);
            box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
        }

        .search-container h2 {
            font-size: 1.5rem;
            font-weight: bold;
            color: white;
            margin-bottom: 1.5rem;
        }

        .search-container h2 span {
            color: #E67E22;
        }

        .search-form {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        @media (min-width: 768px) {
            .search-form {
                flex-direction: row;
            }
        }

        .search-input {
            position: relative;
            flex-grow: 1;
            margin-right: 2%;
        }

        .search-input input {
            width: 100%;
            background-color: rgba(30, 41, 59, 0.8);
            color: white;
            border: 2px solid rgba(85, 122, 70, 0.3);
            padding: 0.75rem 1rem;
            outline: none;
            transition: border-color 0.3s;
        }

        .search-input input:focus {
            border-color: #E67E22;
        }

        .search-input i {
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(248, 250, 252, 0.5);
        }

        .search-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .search-filters select {
            background-color: rgba(30, 41, 59, 0.8);
            color: white;
            border: 2px solid rgba(85, 122, 70, 0.3);
            padding: 0.75rem 1rem;
            outline: none;
            transition: border-color 0.3s;
        }

        .search-filters select:focus {
            border-color: #E67E22;
        }

        .search-filters button {
            background-color: #557A46;
            color: white;
            font-weight: bold;
            padding: 0.75rem 1.5rem;
            text-decoration: none;
            box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
            transition: all 0.15s;
            border: none;
            cursor: pointer;
        }

        .search-filters button:hover {
            background-color: rgba(85, 122, 70, 0.8);
            transform: translateY(-2px);
            box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25);
        }

        /* 最新更新区域样式 */
        .news {
            background-color: rgba(30, 41, 59, 0.8);
            backdrop-filter: blur(10px);
            padding: 5rem 0;
        }

        .news-container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
        }

        .news-header {
            text-align: center;
            margin-bottom: 4rem;
        }

        .news-header h2 {
            font-size: clamp(1.5rem, 3vw, 2.5rem);
            font-weight: bold;
            color: white;
            margin-bottom: 1rem;
        }

        .news-header h2 span {
            color: #E67E22;
        }

        .news-header p {
            color: rgba(248, 250, 252, 0.7);
            max-width: 500px;
            margin: 0 auto;
        }

        .news-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
        }

        @media (min-width: 1024px) {
            .news-grid {
                grid-template-columns: 2fr 1fr;
            }
        }

        .news-updates {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

        .news-update {
            background-color: rgba(30, 41, 59, 0.6);
            backdrop-filter: blur(10px);
            padding: 1.5rem;
            border: 2px solid rgba(85, 122, 70, 0.3);
            box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
            transition: all 0.3s;
        }

        .news-update:hover {
            transform: translateY(-4px);
            box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25);
        }

        .news-update-header {
            display: flex;
            justify-content: space-between;
            align-items: start;
            margin-bottom: 1rem;
        }

        .news-update-header h3 {
            font-size: 1.25rem;
            font-weight: bold;
            color: white;
            margin: 0;
        }

        .news-update-header span {
            color: rgba(248, 250, 252, 0.6);
            font-size: 0.875rem;
        }

        .news-update p {
            color: rgba(248, 250, 252, 0.7);
            margin-bottom: 1rem;
        }

        .news-update ul {
            list-style-type: disc;
            padding-left: 1.25rem;
            color: rgba(248, 250, 252, 0.7);
            margin-bottom: 1rem;
        }

        .news-update a {
            color: #E67E22;
            text-decoration: none;
            display: flex;
            align-items: center;
        }

        .news-update a i {
            margin-left: 0.5rem;
        }

        .news-update a:hover {
            text-decoration: underline;
        }

        .news-more {
            text-align: center;
            margin-top: 2rem;
        }

        .news-more a {
            background-color: #557A46;
            color: white;
            font-weight: bold;
            padding: 0.75rem 1.5rem;
            text-decoration: none;
            box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
            transition: all 0.15s;
            display: inline-flex;
            align-items: center;
        }

        .news-more a i {
            margin-left: 0.5rem;
        }

        .news-more a:hover {
            background-color: rgba(85, 122, 70, 0.8);
            transform: translateY(-2px);
            box-shadow: 0 6px 0 rgba(0, 0, 0, 0.25);
        }

        .news-popular {
            background-color: rgba(30, 41, 59, 0.6);
            backdrop-filter: blur(10px);
            padding: 1.5rem;
            border: 2px solid rgba(85, 122, 70, 0.3);
            box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
            margin-bottom: 2rem;
        }

        .news-popular h3 {
            font-size: 1.25rem;
            font-weight: bold;
            color: white;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
        }

        .news-popular h3 i {
            color: #E67E22;
            margin-right: 0.5rem;
        }

        .news-popular ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .news-popular li {
            display: flex;
            align-items: center;
        }

        .news-popular-rank {
            width: 3rem;
            height: 3rem;
            background-color: rgba(85, 122, 70, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            margin-right: 1rem;
        }

        .news-popular-info {
            flex-grow: 1;
        }

        .news-popular-info h4 {
            color: white;
            font-size: 1rem;
            /*font-weight: medium;*/
            margin: 0;
        }

        .news-popular-download {
            display: flex;
            align-items: center;
            color: rgba(248, 250, 252, 0.6);
            font-size: 0.875rem;
        }

        .news-popular-download i {
            margin-right: 0.25rem;
        }

        .news-popular-version {
            color: #E67E22;
            font-weight: bold;
        }

        .news-upcoming {
            background-color: rgba(30, 41, 59, 0.6);
            backdrop-filter: blur(10px);
            padding: 1.5rem;
            border: 2px solid rgba(85, 122, 70, 0.3);
            box-shadow: 0 4px 0 rgba(0, 0, 0, 0.25);
        }

        .news-upcoming h3 {
            font-size: 1.25rem;
            font-weight: bold;
            color: white;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
        }

        .news-upcoming h3 i {
            color: #E67E22;
            margin-right: 0.5rem;
        }

        .news-upcoming-item {
            margin-bottom: 1rem;
        }

        .news-upcoming-item h4 {
            color: white;
            font-size: 1rem;
            /*font-weight: medium;*/
            margin-bottom: 0.25rem;
        }

        .news-upcoming-item p {
            color: rgba(248, 250, 252, 0.7);
            font-size: 0.875rem;
            margin-bottom: 0.25rem;
        }

        .news-upcoming-date {
            display: flex;
            align-items: center;
            color: rgba(248, 250, 252, 0.6);
            font-size: 0.875rem;
        }

        .news-upcoming-date i {
            margin-right: 0.25rem;
        }

        /* 关于我们区域样式 */
        .about {
            background-color: rgba(30, 41, 59, 1);
            padding: 5rem 0;
            position: relative;
            overflow: hidden;
        }

        .about::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://picsum.photos/id/137/1920/1080') fixed no-repeat;
            background-size: cover;
            opacity: 0.2;
        }

        .about::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(30, 41, 59, 0.9), rgba(30, 41, 59, 1));
            z-index: 10;
        }

        .about-container {
            width: 90%;
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            z-index: 20;
            display: grid;
            grid-template-columns: 1fr;
            gap: 3rem;
        }

        @media (min-width: 1024px) {
            .about-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .about-content h2 {
            font-size: clamp(1.5rem, 3vw, 2.5rem);
            font-weight: bold;
            color: white;
            margin-bottom: 1.5rem;
        }

        .about-content h2 span {
            color: #E67E22;
        }

        .about-content p {
            color: rgba(248, 250, 252, 0.8);
            margin-bottom: 1.5rem;
        }
        .mod-list{
            background-color: rgba(30, 41, 59, 1);
            padding: 4rem 0;
        }
        .mod-list .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .mod-list h1 {
            color: #333;
            text-align: center;
        }

        .mod-list .controls {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .mod-list button {
            background-color: #557a46;
            color: white;
            border: none;
            padding: 8px 16px;
            /*border-radius: 4px;*/
            cursor: pointer;
            font-size: 14px;
        }

        .mod-list button:hover {
            background-color: #4a6a44;
        }

        .mod-list button.delete {
            background-color: #f44336;
        }

        .mod-list button.delete:hover {
            background-color: #d32f2f;
        }

        .mod-list button.edit {
            background-color: #2196F3;
            margin-right: 5px;
        }

        .mod-list button.edit:hover {
            background-color: #0b7dda;
        }

        .mod-list table {
            width: 100%;
            border-collapse: collapse;
            background-color: #343e4e;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .mod-list th, td {
            padding: 12px 15px;
            text-align: left;
            color: white;
            border-bottom: 1px solid #343e4e;
        }

        .mod-list th {
            background-color: #557A46;
            color: white;
        }


        /*tr:hover {
            background-color: #f9f9f9;
        }*/

        .mod-list .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            z-index: 1000;
        }

        .mod-list .modal-content {
            background-color: white;
            margin: 5% auto;
            padding: 20px;
            border-radius: 5px;
            width: 50%;
            max-width: 600px;
            position: relative;
        }

        .mod-list .close {
            position: absolute;
            right: 20px;
            top: 10px;
            font-size: 28px;
            cursor: pointer;
        }

        .mod-list .form-group {
            margin-bottom: 15px;
        }

        .mod-list label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .mod-list input, .mod-list textarea,.mod-list select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            /*border-radius: 4px;*/
            box-sizing: border-box;
        }

        .mod-list textarea {
            height: 100px;
            resize: vertical;
        }

        .mod-list .modal-buttons {
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            margin-top: 20px;
        }

        .mod-list .status {
            padding: 4px 8px;
            /*border-radius: 4px;*/
            font-size: 12px;
            color: white;
        }

        .mod-list .status-critical {
            background-color: #f44336;
        }

        .mod-list .status-medium {
            background-color: #ff9800;
        }

        .mod-list .status-minor {
            background-color: #2196F3;
        }

        .mod-list .status-info {
            background-color: #557a46;
        }
    </style>
</head>

<body>
<!-- 导航栏 -->
<nav id="navigationBar">
    <div class="nav-container">
        <div class="nav-logo">
            <h1>我的世界<span class="text-accent">MOD</span>百科</h1>
        </div>
        <div class="nav-desktop">
            <a href="#">首页</a>
            <a href="#">选择1</a>
            <a href="#">选择2</a>
            <a href="#">选择3</a>
            <a href="#">选择4</a>
            <a href="#">选择5</a>
            <!-- 用户头像 -->
            <div class="user">
                <img alt="用户头像" class="profilePicture" src="">
                <a href="#">登录</a>
                <a href="#">注册</a>
            </div>
        </div>
        <button class="nav-mobile-btn" id="menu-toggle">
            <i class="fa fa-bars"></i>
        </button>
    </div>
</nav>

<!-- MOD搜索和筛选 -->
<section class="search">
    <h1><span class="text-accent">MOD</span>特性<span class="text-Warning">警告</span>管理</h1>
    <div class="search-container">
        <h2>查找<span class="text-accent">MOD</span>特性<span class="text-Warning">警告</span></h2>
        <div class="search-form">
            <div class="search-input">
                <input id="search" placeholder="搜索MOD名称、作者或描述..." type="text">
                <i class="fa fa-search"></i>
            </div>
            <div class="search-filters">
                <select>
                    <option>所有版本</option>
                    <option>1.19.x</option>
                    <option>1.18.x</option>
                    <option>1.17.x</option>
                    <option>1.16.x</option>
                </select>
                <select>
                    <option>所有类别</option>
                    <option>科技MOD</option>
                    <option>魔法MOD</option>
                    <option>建筑MOD</option>
                    <option>冒险MOD</option>
                </select>
                <select>
                    <option>下载量排序</option>
                    <option>最新更新</option>
                    <option>最多下载</option>
                    <option>评分最高</option>
                    <option>字母排序</option>
                </select>
                <button onclick="searchWarnings()">
                    <i class="fa fa-filter mr-2"></i> 筛选
                </button>
                <button>
                    <i class="fa mr-2">添加新警告</i>
                </button>
            </div>
        </div>
    </div>
</section>

<!-- MOD列表 -->
<section class="mod-list">
    <div class="container">
        <table id="warningTable">
            <thead>
            <tr>
                <th>ID</th>
                <th>模组</th>
                <th>标题</th>
                <th>内容</th>
                <th>类型</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <!-- 警告数据将通过JavaScript动态生成 -->
            </tbody>
        </table>
    </div>
</section>

<!-- 关于我们 -->
<section class="about" id="about">
    <div class="about-container">
        <div class="about-content">
            <h2>关于我们的<span class="text-accent">MOD</span>网站</h2>
            <p>
                我们是一群热爱《我的世界》的玩家，致力于为玩家社区提供高质量、安全且丰富的MOD资源。自****年成立以来，我们已经帮助数***玩家扩展了他们的游戏体验。</p>
            <p>
                我们的使命是打造一个友好、安全且易于使用的MOD平台，让每个玩家都能轻松找到适合自己的MOD，同时支持MOD开发者获得应有的认可和回报。</p>
        </div>
    </div>
</section>

<script>
    // 存储警告数据
    let warnings = [
        {id: 1, src: 'img/262.png', title: "游戏崩溃风险", content: "此MOD可能导致游戏在特定场景下崩溃", type: "critical"},
        {id: 2, src: 'img/280.png', title: "性能影响", content: "使用此MOD可能导致游戏帧率下降", type: "medium"},
        {id: 3, src: 'img/507.png', title: "兼容性问题", content: "与最新版本游戏可能存在兼容性问题", type: "medium"},
        {id: 4, src: 'img/647.png', title: "新功能提示", content: "此MOD添加了新的游戏机制", type: "info"}
    ];

    let currentWarningId = null;

    // 页面加载时显示所有警告
    document.addEventListener('DOMContentLoaded', displayWarnings);

    // 显示所有警告
    function displayWarnings(filteredWarnings = null) {
        const tableBody = document.querySelector('#warningTable tbody');
        tableBody.innerHTML = '';

        const dataToDisplay = filteredWarnings || warnings;

        if (dataToDisplay.length === 0) {
            const row = document.createElement('tr');
            row.innerHTML = `<td colspan="5" style="text-align: center;">没有找到警告</td>`;
            tableBody.appendChild(row);
            return;
        }

        dataToDisplay.forEach(warning => {
            const row = document.createElement('tr');
            row.innerHTML = `
                    <td>${warning.id}</td>
                    <td><img src="${warning.src}" alt="${warning.title}" style="width: 60px; height: 60px;" class="warning-image"></td>
                    <td>${warning.title}</td>
                    <td>${warning.content}</td>
                    <td><span class="status status-${warning.type}">${getTypeName(warning.type)}</span></td>
                    <td>
                        <button class="edit" onclick="editWarning(${warning.id})">编辑</button>
                        <button class="delete" onclick="openDeleteModal(${warning.id})">删除</button>
                    </td>
                `;
            tableBody.appendChild(row);
        });
    }

    // 获取类型的显示名称
    function getTypeName(type) {
        switch (type) {
            case 'critical':
                return '严重';
            case 'medium':
                return '中等';
            case 'minor':
                return '轻微';
            case 'info':
                return '信息';
            default:
                return type;
        }
    }


    // 搜索警告
    function searchWarnings() {
        const searchTerm = document.getElementById('search').value.toLowerCase();
        if (!searchTerm) {
            displayWarnings();
            return;
        }

        const filtered = warnings.filter(warning =>
            warning.title.toLowerCase().includes(searchTerm) ||
            warning.content.toLowerCase().includes(searchTerm)
        );

        displayWarnings(filtered);
    }

    $(document).ready(function () {
        $('#menu-toggle').click(function () {
            $('#mobile-menu').slideToggle();
        });
    });
</script>
</body>
</html>
